<script setup>
import OApageheader from '../../components/OApageheader.vue';
import {ref,reactive,onMounted,computed,watch,onBeforeUnmount,shallowRef} from 'vue';
import {ElMessage} from 'element-plus';
import apiClient from '../../api/api';
import OAMain from '../../components/OAMain.vue';
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { useAuthStore } from '../../stores/auth.js'; // 导入 auth 模块的 store

const authStore = useAuthStore(); // 获取 auth 模块的 store
const token = authStore.token; // 获取 token

let form = reactive({ // 表单数据对象，用于存储表单输入的值
  title: '', 
  department_id: [], 
  content: '', 
});

const rules = reactive({ // 表单验证规则对象，用于验证表单输入的值是否符合要求
  title: [ // 标题验证规则
    { required: true, message: '请输入标题', trigger: 'blur' }, // 验证规则：必填，提示信息：请输入标题，触发时机：失去焦点
  ],
  department_id: [ // 部门ID验证规则
    { required: true, message: '请选择部门', trigger: 'change' }, // 验证规则：必填，提示信息：请选择部门，触发时机：值改变
  ],
  content: [ // 内容验证规则
    { required: true, message: '请输入内容', trigger: 'blur' }, // 验证规则：必填，提示信息：请输入内容，触发时机：失去焦点
  ],
});

let informref = ref(); // 表单引用对象，用于操作表单

let formLabelWidth = '120px'; // 表单标签宽度

let departments = ref([]); // 部门数据对象，用于存储部门数据

 //////这是和wangEditor相关的代码，用于创建和管理编辑器实例////
 const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('<p>hello</p>')
const toolbarConfig = {}

const editorConfig = { 
  placeholder: '请输入内容...',
  // 上传图片配置
  MENU_CONF:{
    uploadImage:{
      server: import.meta.env.VITE_BASE_URL + '/image/upload/', // 上传图片的服务器地址
      fieldName: 'image', 
      maxFielSize: 100 * 1024 * 1024, // 上传图片的最大文件大小，单位为字节，这里设置为 100MB
      maxNumberOfFiles: 100, // 上传图片的最大文件数量，这里设置为 100 张
      headers: { // 上传图片的请求头
        'Authorization': 'Bearer ' + token, // 这里假设你已经有了一个名为 token 的变量，用于存储用户的认证信息
      },
      timeout: 6 * 1000, // 6 秒
      customInsert(res, insertFn) {  
        if(res.errno == 0){
            // res 即服务端的返回结果
            let data = res.data 
            let url = import.meta.env.VITE_BASE_URL + data.url // 图片的 URL 地址
            let href = import.meta.env.VITE_BASE_URL + data.href // 图片的链接地址
            let alt = import.meta.env.VITE_BASE_URL + data.href // 图片的描述信息
            // 从 res 中找到 url alt href ，然后插入图片
            insertFn(url, alt, href)
        }else{
            ElMessage.error(res.message)
        }               
      },
      // 单个文件上传失败
    onFailed(file, res) {           // JS 语法
        console.log(`${file.name} 上传失败`, res)
  },

  // 上传错误，或者触发 timeout 超时
    onError(file, err, res) {              
        if(file.size > 100 * 1024 * 1024){ 
            ElMessage.error('上传图片大小不能超过 100MB')
        }else{
            ElMessage.error('上传失败，请重试')
        }
    }
  }
}
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
 //////这是和wangEditor相关的代码，用于创建和管理编辑器实例/////

const onSubmit = () => { // 提交表单
    informref.value.validate(async(valid, fields) => { // 验证表单
      if (valid) { // 如果验证通过
        try { // 发送请求
          let res = await apiClient.post('inform/informs/', { // 发送请求，添加表单数据
            title: form.title, // 标题
            department_id: form.department_id, // 部门ID
            content: form.content, // 内容
          }); // 发送请求，添加表单数据
          ElMessage.success('发布成功');
          informref.value.resetFields(); 
        } catch (detail) { 
          ElMessage.error(detail); 
        }
    }
})
}

onMounted(async() => { // 页面加载时，获取部门数据
  try {
      let res = await apiClient.get('oaauth/dept/'); // 发送请求，获取部门数据
      departments.value = res.data; // 存储部门数据
  }catch (error) { 
      ElMessage.error(error.message); // 提示错误信息
  }
})

</script>

<template>
<OAMain>
  <OApageheader content="发布通知"></OApageheader>
  <el-form :model="form" :rules="rules" ref="informref" >
        <el-form-item label=" 标题" :label-width="formLabelWidth" prop="title">
            <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>

        <el-form-item label="部门可见" :label-width="formLabelWidth" prop="department_id">
            <!-- 多选框 -->
            <el-select multiple v-model="form.department_id">
                <el-option :value="0" label="所有部门"></el-option>
                <el-option v-for="item in departments" :label="item.name" :value="item.id" :key="item.name" />
            </el-select>
        </el-form-item>
        
        <el-form-item label="通知内容" :label-width="formLabelWidth" prop="content">
            <!-- 富文本编辑器 -->
            <div style="border: 1px solid #ccc; width:100%">
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editorRef"
                  :defaultConfig="toolbarConfig"
                  :mode="mode"
                />
                <Editor
                  style="height: 350px; overflow-y: hidden;"
                  v-model="form.content"
                  :defaultConfig="editorConfig"
                  :mode="mode"
                  @onCreated="handleCreated"
                />
              </div>
        </el-form-item>
        <el-form-item>
            <div style="text-align: right; flex:1">
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </div>
        </el-form-item>
  </el-form>
</OAMain>
</template>

<style scoped>

</style>
